<!-- 立即录音 -->
<template>
    <div class="audiopopup">
        <p class="text-align-c"><span class="line"></span><span class="play font-24">录音示例</span><span class="line"></span></p>
        <p class="color-6 font-28">如果您无法简洁的表达您的想法，那只说明您还不够了解他。</p>
        <p class="hyh text-align-r"><span class="icons_refresh color-default">换一换</span></p>
        <div class="content clearfic">
            <p class="time text-align-c color-9">录音时间剩余<span class="font-5 color-6">20.00s</span></p>
            <p class="text-align-c pb0"><img src="../../assets/image/service/img_recording@2x.png" /></p>
            <van-row type="flex" justify="space-between" class="audiobox">
                <van-col span="12" class="text-align-l">
                    <span class="color-6 font-28">00.00s</span>
                </van-col>
                <van-col span="12" class="text-align-r">
                    <span class="color-9 font-28">20.00 s</span>
                </van-col>
            </van-row>
            <van-row type="flex" justify="space-between" class="audiobox">
                <van-col span="8" class="text-align-c">
                    <img src="../../assets/image/service/button_reset@2x.png" />
                </van-col>
                <van-col span="8" class="text-align-c">
                    <img src="../../assets/image/service/button_recording@2x.png" /><!-- 录音icon -->
                    <img src="../../assets/image/service/button_stop@2x.png" style="display: none" /><!-- 停止icon -->
                </van-col>
                <van-col span="8" class="text-align-c">
                    <img src="../../assets/image/service/button_preservation@2x.png" />
                </van-col>
            </van-row>
            <p class="color-9 font-24 text-align-c">最多录制20秒，点击开始录制</p>
        </div>
    </div>
</template>
<script>
    export default {
      data(){
        return {

        };
      },
      components: {
        
      },
      methods: {
        listentoClosePopup() {
            this.$emit('listentoaAudioEvent');   
        }
      }

    }
</script>
<style scoped>
.hyh {
    padding: 0 1rem 0.6rem !important;
    text-align: right !important;
}
.content {
    border-top: 0.02rem solid rgb(233, 231, 231);
}
.content p:nth-child(1) {
    line-height: 1rem;
    padding-top: 1.4rem;
}
.time span {
    padding-left: 0.6rem;
}
.audiopopup p {
    padding: 0.6rem 1rem 0.6rem;
    text-align: center;
    line-height: 0.8rem;
}
.audiopopup span {
    display: inline-block;
}
.audiopopup .line {
    border: 0.02rem solid rgb(233, 231, 231);
    width: 2rem;
    height: 0.02rem;
    display: inline-block;
}
.audiopopup .play {
    background: url('../../assets/image/service/icon_recording_gray@2x.png') no-repeat left center;
    background-size: 0.44rem 0.68rem;
    padding-left: 0.6rem;
    margin: 0 0.7rem;
    color: #999;
}
.audiopopup .icons_refresh {
    background: url('../../assets/image/service/icon_refresh@2x.png') no-repeat left center;
    background-size: 0.56rem 0.52rem;
    padding-left: 0.8rem;
}
.audiobox .van-col--8:nth-child(1) img {
    max-width: 1.7rem;
    margin-top: 0.46rem;
}
.audiobox .van-col--8:nth-child(2) img {
    max-width: 2.6rem;
}
.audiobox .van-col--8:nth-child(3) img {
    max-width: 1.44rem;
    margin-top: 0.64rem;
}
.audiobox {
    padding: 0 1rem;
}
</style>